@charset "UTF-8";

/*导航主要样式*/

.nav {
    height: r(98);
    background: #fff;
    text-align: center;
    color: $font-color-main;
    display: -webkit-box;
    display: box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    a {
        color: $font-color-main
    }
    .badge{
        position: absolute;
        font-size: r(24);
        padding: r(4);
        min-width: r(32);
        top: 0;
        margin-left: - r(6)
    }
    .bages-s{
        position: absolute;
        top: r(6);
        margin-left: - r(6)
    }
}
.nav-fixed{
    padding-bottom: r(98);
    .nav {
        position: fixed!important;
        bottom: 0;
        width: 100%;
        left: 0;
        z-index: 1000
    }
}
.nav-item {
    position: relative;
    height: 100%;
    display: -webkit-box;
    display: box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    -webkit-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
}

.nav-item.active {
    color: $color-main;
}

.nav.bg-main .nav-item {
    @include bg-main;
    &.active {
        background: darken($color-main,4%)!important
    }
}
.nav.bg-second .nav-item {
    @include bg-second;
    &.active {
        background: darken($color-second,4%)!important
    }
}

.nav.bg-red .nav-item {
    @include bg-red;
    &.active {
        background: darken($color-red,4%)!important
    }
}

.nav.bg-blue .nav-item {
    @include bg-blue;
    &.active {
        background: darken($color-blue,4%)!important
    }
}

.nav.bg-green .nav-item {
    @include bg-green;
    &.active {
        background: darken($color-green,4%)!important
    }
}

.nav.bg-orange .nav-item {
    @include bg-orange;
    &.active {
        background: darken($color-orange,4%)!important
    }
}
